import React, {createContext} from 'react';

const MyContext=createContext()
const {Provider,Consumer}=MyContext

function A(){
    return(
        <div style={{background:'green',padding:'10px'}}>
            <h2>我是A</h2>
            <B></B>
        </div>
    )
}
function B(){

    return(
        <div style={{background:'orange',padding:'10px'}}>
            <h2>我是B</h2>
            {/* 类式组件接收：static contextType = MyContext*/}
            {/*函数式组件接收*/}
            <Consumer>
                {value=>`name: ${value.name},age: ${value.age}`}
            </Consumer>
        </div>
    )
}
export default function UseContext() {
    return (
        <div style={{background:'red',padding:'10px'}}>
            <h2>使用createContext跨层级传值</h2>
            <Provider value={{name:'xxx',age:19}}>
                <A/>
            </Provider>
        </div>
    );
};
